<template>
  <div class="app-container">
    <div class="filter-container" >
      <!--<div style="height: 30px;">
        <span>营业汇总表</span>
      </div>-->
      <!-- <searchBar @searchEvent= "handleFilter">
        <div slot="one" style="display: inline-block;">
          <el-select v-model="listQuery.importance" placeholder="均价金额" clearable style="width: 120px" class="filter-item">
            <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item"/>
          </el-select>
        </div>
      </searchBar> -->
    </div>
    <div style="height: 50px;margin-top: 20px;padding: 0 12px; background:#eee; line-height: 50px;">
      <span>店铺订单详情</span>
      <el-button v-waves style="float: right; margin-top: 7px;" class="filter-item" type="primary" @click="download">月报表</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :key="tableKey"
      :data="list"
      __height="550"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @filter-change="filterChange">
      <el-table-column label="订单类型" fixed prop="id" align="center" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.distributionModeId | distributionModeFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column label="下单时间" fixed width="180px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" fixed width="110px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.telephone }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :filters="orderStateConf"
        :filter-multiple="false"
        column-key = "orderState"
        prop="orderState"
        filter-placement="bottom-end"
        label="订单状态"
        fixed
        width="110px"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.orderState | orderStateFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column label="桌号" fixed width="110px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.tableNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单流水号" fixed width="180px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.serialNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单金额" fixed align="center" width="80px">
        <template slot-scope="scope">
          <span>{{ scope.row.orderMoney }}</span>
        </template>
      </el-table-column>
      <el-table-column label="POS端折扣" align="center" width="110px">
        <template slot-scope="scope">
          <span>{{ scope.row.orderPosDiscountMoney }}</span>
        </template>
      </el-table-column>
      <el-table-column label="会员折扣" align="center" width="80px">
        <template slot-scope="scope">
          <span>{{ scope.row.memberDiscountMoney }}</span>
        </template>
      </el-table-column>
      <el-table-column label="微信" align="center" width="80px">
        <template slot-scope="scope">
          <span>{{ scope.row.wechatMoney }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付宝" align="center" width="80px">
        <template slot-scope="scope">
          <span>{{ scope.row.alipayPay }}</span>
        </template>
      </el-table-column>
      <el-table-column label="现金实收" align="center" width="80px">
        <template slot-scope="scope">
          <span>{{ scope.row.cash }}</span>
        </template>
      </el-table-column>
      <el-table-column label="银联" align="center" width="80px">
        <template slot-scope="scope">
          <span>{{ scope.row.unionPay }}</span>
        </template>
      </el-table-column>
      <el-table-column label="新美大" align="center" width="80px">
        <template slot-scope="scope">
          <span>{{ scope.row.newBeautyPay }}</span>
        </template>
      </el-table-column>
      <el-table-column label="会员支付" align="center" width="80px">
        <template slot-scope="scope">
          <span>{{ scope.row.memberPay }}</span>
        </template>
      </el-table-column>
      <el-table-column label="抹零" align="center" width="80px">
        <template slot-scope="scope">
          <span>{{ scope.row.realEraseMoney }}</span>
        </template>
      </el-table-column>
      <el-table-column label="团购" align="center" width="80px">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>
      <el-table-column label="线上优惠券" align="center" width="110px">
        <template slot-scope="scope">
          <span>{{ scope.row.couponPay }}</span>
        </template>
      </el-table-column>
      <el-table-column label="线下代金券" align="center" width="110px">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>
      <el-table-column label="充值金额" align="center" width="80px">
        <template slot-scope="scope">
          <span>{{ scope.row.rechargePay }}</span>
        </template>
      </el-table-column>
      <el-table-column label="红包支付" align="center" width="80px">
        <template slot-scope="scope">
          <span>{{ scope.row.hongbaoPay }}</span>
        </template>
      </el-table-column>
      <el-table-column label="充值赠送金额" align="center" width="110px">
        <template slot-scope="scope">
          <span>{{ scope.row.rechargeGivePay }}</span>
        </template>
      </el-table-column>
      <el-table-column label="等位红包支付" align="center" width="110px">
        <template slot-scope="scope">
          <span>{{ scope.row.dengWeiPay }}</span>
        </template>
      </el-table-column>
      <el-table-column label="会员支付" align="center" width="80px">
        <template slot-scope="scope">
          <span>{{ scope.row.memberPay }}</span>
        </template>
      </el-table-column>
      <el-table-column label="免单金额" align="center" width="80px">
        <template slot-scope="scope">
          <span>{{ scope.row.exemptionMoney }}</span>
        </template>
      </el-table-column>
      <el-table-column label="退菜返还红包" align="center" width="110px">
        <template slot-scope="scope">
          <span>{{ scope.row.returnVegetablesRedPackage }}</span>
        </template>
      </el-table-column>
      <el-table-column label="现金退款" align="center" width="80px">
        <template slot-scope="scope">
          <span>{{ scope.row.cashRefund }}</span>
        </template>
      </el-table-column>
      <el-table-column label="实体卡充值" align="center" width="110px">
        <template slot-scope="scope">
          <span>{{ scope.row.entityCardRechargePay }}</span>
        </template>
      </el-table-column>
      <el-table-column label="实体卡赠送" align="center" width="110px">
        <template slot-scope="scope">
          <span>{{ scope.row.entityCardGivePay }}</span>
        </template>
      </el-table-column>
      <el-table-column label="实体卡退款" align="center" width="110px">
        <template slot-scope="scope">
          <span>{{ scope.row.entityCardreFundPay }}</span>
        </template>
      </el-table-column>
      <el-table-column label="实体卡折扣" align="center" width="110px">
        <template slot-scope="scope">
          <span>{{ scope.row.entityCardreDiscount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="80px">
        <template slot-scope="scope">
          <Link @gotoDetail="gotoDetail(scope.row.orderId)">查看详情</Link>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" @pagination="fetchData" />
    <OrderDetail v-if="showOrderDetail" :shop-detail-name="shopDetailName" :order-id="currOrderId" @close-dialog="showOrderDetail=!showOrderDetail"/>
  </div>
</template>

<script>
import waves from '@/directive/waves' // Waves directive
// import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

import searchBar from '@/pages/common/searchBar'
import Link from '@/pages/common/Link'
import OrderDetail from './detail.vue'
import ReportSearchMixin from '@/pages/common/mixin/ReportSearch.js'
import DataConfMixin from '@/pages/common/mixin/DataConf.js'

export default {
  name: 'ComplexTable',
  components: { searchBar, Pagination, Link, OrderDetail },
  directives: { waves },
  mixins: [ReportSearchMixin, DataConfMixin],
  data() {
    return {
      listQuery: {
        shopDetailId: null,
        orderState: 99,
        pageNum: 1,
        pageSize: 1
      },
      showOrderDetail: false, // 开关显示订单详情
      shopDetailName: '', // 店铺名称传递过来
      currOrderId: null, // 当前被查看的订单号
      overAllUrl: '', // 概览接口地址
      listUrl: '/service-report/data/ShopOrderList' // 列表接口地址
    }
  },
  async created() {
    this.listQuery.shopDetailId = this.$route.query.shopDetailId
    this.shopDetailName = this.$route.query.shopDetailName
    this.listQuery.shopDetailId && await this.fetchData()
  },
  methods: {
    // 跳转到订单详情
    gotoDetail(id) {
      this.currOrderId = id
      this.showOrderDetail = true
    },
    // 表格过滤器筛选
    async filterChange(filters) {
      // console.log(filters['orderState'][0], '------')
      this.listQuery.orderState = filters['orderState'][0] === undefined ? 99 : filters['orderState'][0] // 99指获取全部状态
      await this.fetchData()
    }
  }
}
</script>
